<template>
  <div class="page">
  	<div class="container">
	  	<div class="row">
	  		<div class="sm8">
	  			<resourcesGrid v-for="article in list" :key="article.id" :article="article"></resourcesGrid>

					<div style="clear:both"></div>
					<div class="pagination">
					  <el-pagination
              v-if="total > page_size"
					    layout="total, prev, pager, next, jumper"
              @current-change="skipPage"
              :page-size="page_size"
					    :total="total">
					  </el-pagination>
					</div>
	  		</div>
				<div class="sm4">
					<sidebar></sidebar>
				</div>
	  	</div>  		
  	</div>
  </div>
</template>

<script>
import articleGrid from '@/components/grid/articleGrid'
import resourcesGrid from '@/components/grid/resourcesGrid'
import sidebar from '@/components/sidebar/sidebar'
export default {
  name: 'resourcesList',
  data () {
  	return {
  		list:[],
      page_size:10,
      total: 10,
      category_id: 0,
  	}
  },
  created: function(){
    this.fetchData();
    this.getArticle(1);
  },
  methods: {
    skipPage(page){
      this.getArticle(page);
    },
    getArticle(page){
      this.$http.post('/api/category/getCategoryArticle', {'category_id':this.category_id,'page':page}).then(function(result){
        var data = result.body.data;
        this.list = data['list'];
        this.page_size = data['page_size'];
        this.total = data['total'];
      })
    },
    fetchData () { 
      this.category_id = this.$route.params.id;
      this.getArticle(1);
    }

  },
  components: {articleGrid, resourcesGrid, sidebar},
  watch: {
    '$route': 'fetchData'
  },
}
</script>

<style type="text/css">
	.pagination{padding-bottom: 5px}
	.pagination li,.pagination button{width: 30px;height: 30px;}
</style>